<template>
  <div class="body">
    <div class="tk bg-tk" v-show="delivertk_show">
      <div class="bg"></div>
      <div class="tk-box">
        <div class="tk-item">
          <div class="left">查询</div>
          <div class="right">
            <div class="close">
              <img src="../../assets/images/dwxc/tk_x.png" @click="close(1)" />
            </div>
          </div>
        </div>
        <div class="tk-item">
          <div class="left">查询名称</div>
          <div class="right">
            <input name="mc" id="mc" type="text" placeholder="请输入"  v-model="name"/>
          </div>
        </div>
        <div class="tk-item">
          <div class="left">状态</div>
          <div class="right tk-select" id="zt" @click="state">
            <input name="zt" type="text" readonly="readonly" placeholder="请选择" v-model="state_text" />
            <img src="../../assets/images/dwxc/j.png">
          </div>
        </div>
        <div class="tk-item date-piker">
          <div id="qdate" @click="tiem(1)"><span id="beginDate">{{start_time==""?"请选择":start_time}}</span><img src="../../assets/images/dwxc/rq.png"
              class="rq_img1"></div>
          <div id="zdate" @click="tiem(2)"><span id="endDate">{{end_time==""?"请选择":end_time}}</span><img src="../../assets/images/dwxc/rq.png"
              class="rq_img1"></div>
        </div>
        <div class="tk-item btns">
          <div class="btn" @click="determine">确定</div>
        </div>
      </div>
    </div>

    <div class="tk sm-tk" v-show="tk_show">
      <div class="bg"></div>
      <div class="tk-box">
        <div class="tk-item">
          <div class="left">请选择</div>
          <div class="right">
            <div class="close">
              <img src="../../assets/images/dwxc/tk_x.png" @click="close(2)" />
            </div>
          </div>
        </div>
        <div class="tk-item option" @click="state_choice('进行中')">
          <div class="left">进行中</div>
          <div class="right"></div>
        </div>
        <div class="tk-item option" @click="state_choice('已结束')">
          <div class="left">已结束</div>
          <div class="right"></div>
        </div>
      </div>
    </div>

    <van-popup v-model="show_time" position="bottom">
      <van-datetime-picker v-model="currentDate" title="选择年月日" type="date" :min-date="minDate" :max-date="maxDate"
        @cancel="show_time = false" @confirm="confirmPicker" />
    </van-popup>
  </div>
</template>

<script>
  export default {
    name: 'dwxc_1_calendar',
    data() {
      return {
        tk_show: false,//是否显示状态弹框
        state_text: "",//状态值
        name:"",//姓名
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2100, 12, 31),
        currentDate: new Date(),
        show_time: false,
        start_time: "",
        end_time: "",
        is_time: "",
      }
    },
    props: ["delivertk_show"],
    // computed: {
    //   delivertk_show() {

    //   }
    // },
    mounted() {
      var _this = this;

    },

    //进入该页面时，用之前保存的滚动位置赋值
    methods: {
      close(state) {//关闭弹框
        if (state == 1) {
          this.$emit("receivetkshow", false)
        } else {
          this.tk_show = false
        }
      },
      state() {//显示状态弹框
        this.tk_show = true
      },
      state_choice(text) {//选择状态
        this.state_text = text
        this.tk_show = false
      },
      determine(){//弹框确定
        var a=""
        if(this.state_text=="进行中"){
          a=0
        }else if(this.state_text=="已结束"){
          a=1
        }
        var obj={
          name:this.name,
          state_text:a,
          start_time:this.start_time,
          end_time:this.end_time,

        }
        this.$emit("receiveparameter", obj)
        this.$emit("receivetkshow", false)
      },
      tiem(i) {
        this.is_time = i
        this.show_time = true
      },
      confirmPicker(val) {
        let year = val.getFullYear()
        let month = val.getMonth() + 1
        let day = val.getDate()
        let hour = val.getHours()
        let minute = val.getMinutes()
        if (month >= 1 && month <= 9) { month = `0${month}` }
        if (day >= 1 && day <= 9) { day = `0${day}` }
        if (hour >= 0 && hour <= 9) { hour = `0${hour}` }
        if (minute >= 0 && minute <= 9) { minute = `0${minute}` }
        // this.timeValue = `${year}-${month}-${day} ${hour}:${minute}`
        // console.log(this.is_time)
        // console.log(`${year}-${month}-${day} ${hour}:${minute}`)
        if (this.is_time == 1) {
          if (this.end_time != "") {
            if (new Date(this.end_time) > new Date(`${year}-${month}-${day}`)) {
              this.start_time = `${year}-${month}-${day}`
            } else {
              this.$toast("开始时间不能小于截止时间")
            }
          } else {
            this.start_time = `${year}-${month}-${day}`
          }

        } else {
          if (this.start_time != "") {
            if (new Date(this.start_time) <= new Date(`${year}-${month}-${day}`)) {
              this.end_time = `${year}-${month}-${day}`
            } else {
              this.$toast("截止时间不能小于开始时间")
            }
          } else {
            this.end_time = `${year}-${month}-${day}`
          }

        }
        this.show_time = false
      },

    },
    created() {

      // console.log(6 % 7)
    },

  }
</script>

<style scoped>
  /* 弹框 */
  .tk {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tk-hide {
    display: none !important;
  }

  .sm-tk {
    z-index: 105;
  }

  .tk .bg {
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
  }

  .tk .tk-box {
    width: 8.333333rem;
    height: auto;
    background-color: #FFFFFF;
    z-index: 102;
    border-radius: 0.222222rem;
  }

  .tk .tk-item {
    width: auto;
    height: 1.388888rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px #DDDDDD solid;
    margin-left: 0.333333rem;
    margin-right: 0.333333rem;
  }

  .tk .tk-item .left {
    width: 2.5rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .tk .tk-item .right {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .tk .tk-item .right input {
    height: 100%;
    border: none;
    margin: 0;
    padding: 0;
    text-align: right;
    flex: 1;
    font-size: 0.3889rem;
    margin-left: 0.1259rem;
  }

  #mc {
    text-align: left;
  }

  .tk .tk-item .close {
    position: relative;
    top: 0;
    right: -0.333333rem;
    display: flex;
    align-items: center;
  }

  .tk .tk-item .close img {
    width: 0.37037rem;
    height: 0.37037rem;
    margin: 0.333333rem;
  }

  .tk .date-piker {
    justify-content: space-between;
  }

  .tk .date-piker div {
    width: 3.777777rem;
    height: 1.055555rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5.9994Px 11.9988Px;
    border: 1Px solid #ccc;
    color: #333;
    box-sizing: border-box;
  }

  .tk .date-piker div img {
    width: 0.444444rem;
    height: 0.444444rem;
  }

  .tk .btns {
    height: auto;
  }

  .tk .btns .btn {
    width: 3.648148rem;
    height: 1.074074rem;
    background-color: #2b6cfe;
    color: #FFFFFF;
    border-radius: 0.222222rem;
    margin-top: 0.481481rem;
    margin-bottom: 0.481481rem;
    text-align:center;
    line-height:1.0741rem;
  }

  .tk .tk-select img {
    width: 0.185185rem;
    height: 0.342592rem;
    margin-right: 0.092592rem;
    margin-left: 0.037037rem;
  }

 
</style>